<template>
	<div class="ml-transfer">
		<div style="height:100%">
		  	<div style="height:100%;" ref="bgTransfer" class="ml-bg-transfer-002">
		  		<div class="ml-icon-transfer-002"></div>
		  		<div class="ml-icon-transfer-003"></div>
		  		<div class="ml-icon-transfer-004"></div>
		  		<div v-show="showBtn" v-on:click="goDownload" class="ml-icon-transfer-001"></div>
		  	</div>
		</div>
		
		<div v-show='isWechat' class="modal">
		  	<div class="pointer ml-icon-transfer-005"></div>
		</div>
	</div>
</template>

<script>
import request from "../../config/request.js"
import {bus} from "../../config/bus.js"
import judgeSystem from "../../config/judgeSystem.js"
export default{
	data() {
		return {
			dUrl:{
				ios:null,
				android:null
			},
			downloadUrl:null,
			isWechat:false,
			showBtn:false
		}
	},
	created() {
		var detect = judgeSystem.detect(navigator.userAgent);
		var self = this;
		var system;
		var channel;
		if(detect.os.ios){
			system = 'ios';
			channel = 'ios';
		}else{
			system = 'android';
			channel = 'yingyu686';
		}
		console.log(detect.app.wechat);
		if(detect.app.wechat) {
			this.$data.isWechat=true;
		}
		self.$.ajax({ 
			url:'/fish-backend/apis/app/getDownloadPath',   //提交的url
			type:'GET',
			beforeSend:function(xhr){		  	        		
				xhr.setRequestHeader('appidentifier',system);	
				xhr.setRequestHeader('source','web');
				xhr.setRequestHeader('channel',channel);	
		    },
		    success:function(res){
		    	console.log(res);
				self.$data.downloadUrl = res.data.downloadPath;
				self.$data.showBtn = true;
			}
		});	
	},
	mounted(){


	},
	methods: {
		goDownload(){			
			location.href = this.$data.downloadUrl;
		}
	}
}
</script>

<style lang="scss">
.ml-transfer{
	height:100%;
	background-color:#fff;
	.ml-bg-transfer-002{
		@media screen and (orientation:portrait) {
			width:100%;background-image:url(../../img/bg/bg-transfer-002@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:relative;margin:0 auto; 
		}
		@media all and (orientation : landscape) {
            width:100%;background-image:url(../../img/bg/bg-transfer-002@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:relative;margin:0 auto; 
        }
        .ml-icon-transfer-001{
        	@media screen and (orientation:portrait) {
				width:66%;height:105px;background-image:url(../../img/icon/icon-transfer-001@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:85%; left:17%; 
			}
			@media all and (orientation : landscape) {
	            width:40%;height:80px;background-image:url(../../img/icon/icon-transfer-001@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:70%; left:32%; 
	        }
        }
        .ml-icon-transfer-002{
        	@media screen and (orientation:portrait) {
				width:300px;height:300px;background-image:url(../../img/icon/icon-transfer-002@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:2%; left:30%; 
			}
			@media all and (orientation : landscape) {
	            width:200px;height:200px;background-image:url(../../img/icon/icon-transfer-002@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:0; left:40%; 
	        }
        }
        .ml-icon-transfer-003{
        	@media screen and (orientation:portrait) {
				width:280px;height:150px;background-image:url(../../img/icon/icon-transfer-003@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:25%; left:32%; 
			}
			@media all and (orientation : landscape) {
	            width:200px;height:100px;background-image:url(../../img/icon/icon-transfer-003@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:40%; left:40%; 
	        }
        }
        .ml-icon-transfer-004{
        	@media screen and (orientation:portrait) {
				width:650px;height:500px;background-image:url(../../img/icon/icon-transfer-004@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:40%; left:5%; 
			}
			@media all and (orientation : landscape) {
	            width:0;height:0;background-image:url(../../img/icon/icon-transfer-004@2x.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;position:absolute;top:70%; left:36%; 
	        }
        }

	}
	.modal{
		position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: rgba(0,0,0,.7);
	    .ml-icon-transfer-005{
        	@media screen and (orientation:portrait) {
				width:50%;height:230px;background-image:url(../../img/icon/icon-transfer-005.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;float:left;margin:0 auto; 
			}
			@media all and (orientation : landscape) {
	            width:30%;height:110px;background-image:url(../../img/icon/icon-transfer-005.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;float:left;margin:0 auto;
	        }
        	
       	}
	    .pointer{
	    	position: absolute;
	    	top: 20px;
	    	right: 40px;
	    }
	}
}	
</style>